<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .nav1{
            /*border:#6ce611 solid 2px;*/
            width: 80%;
            height: 200px;
            margin: 100px auto;
        }
        div img {
            float: left;
            width: 200px;
            height: 200px;
            border: rgba(13, 27, 9, 0.1) solid 1px;
            display: block;
            /*margin: 0px 50px 0 10px; !*上， 右， 下， 左*!*/
            margin-left: 12px;
            cursor: pointer; /*鼠标放到图片上的时候为一个手的样式*/
            transition: all 1s; /*过度动画，时间1s*/
            box-shadow: 1px 1px 1px 1px rgba(29, 55, 7, 0.24);
            /*第1个值：水平阴影的长度，此值可以为负值。
            第2个值：垂直阴影的长度，此值可以为负值。
            第3个值：阴影的模糊值，此值不允许为负值。
            第4个值：水平阴影的外延值，此值可以为负值。
            第5个值：阴影的颜色。
            第6个值：此值为空，默认为外阴影，设置成inset为内阴影。*/
        }

        div img:hover {
            transform: scale(1.1); /*放大1.1倍*/
        }
    </style>
</head>
<body>
<div class="nav1">
    <div>
        <img src="image/1.jpg">
        <img src="image/2.jpg">
        <img src="image/3.jpg">
        <img src="image/4.jpg">
        <img src="image/5.jpg">
    </div>
</div>
 <script src="js/jquery-1.11.1.min.js"></script>
 <script>
     $('.nav1 img').hover(function () {
//         alert("鼠标移入")
     },function () {
//         alert("鼠标离开")
     })
 </script>
</body>
</html>